<template>
  <DialogButton
    :submit-loading="addLoading"
    :button-text="Data.addImgIndex.dialogButtonText"
    :button-style="Data.addImgIndex.buttonStyle"
    :dialog-title="Data.addImgIndex.dialogTitle"
    :submit-function="Data.addImgIndex.submitFunction"
    :function-ok="Data.functionOk"
    @dialog-close="Data.functionOk = false"
  >
    <template #body>
      <el-form
        label-width="90px"
        style="min-width: 600px; width: 600px; margin-left:35px;"
      >
        <!-- 图片 -->
        <el-form-item
          label="轮播图片"
          prop="imgUrl"
        >
          <img-upload v-model="Data.addImgIndex.addQuery.imgUrl" />
        </el-form-item>
        <!-- 平台 -->
        <el-form-item
          label="平台"
          prop="imgType"
        >
          <el-radio
            v-model="Data.addImgIndex.addQuery.imgType"
            :label="0"
          >
            移动端
          </el-radio>
        </el-form-item>
        <!-- 状态 -->
        <el-form-item
          label="状态"
          prop="status"
        >
          <el-radio
            v-model="Data.addImgIndex.addQuery.status"
            :label="0"
          >
            禁用
          </el-radio>
          <el-radio
            v-model="Data.addImgIndex.addQuery.status"
            :label="1"
          >
            正常
          </el-radio>
        </el-form-item>
        <!-- 排序 -->
        <el-form-item
          label="排序"
          prop="seq"
        >
          <el-input-number
            v-model="Data.addImgIndex.addQuery.seq"
            :min="0"
            controls-position="right"
            :precision="0"
          />
        </el-form-item>
      </el-form>
    </template>
  </DialogButton>
</template>
<script setup>
import DialogButton from '@/components/DialogButton.vue'
import * as api from '@/api/platform/index-img'

const props = defineProps({
  addOrUpdateVisible: Boolean,
  postId: {
    type: Number,
    default: -1
  }
})

const addLoading = ref(false)
const Data = reactive({
  addImgIndex: {
    dialogButtonText: '作为轮播图',
    dialogTitle: '添加轮播图',
    buttonStyle: 'margin: 0px;width: 100%; padding: 0; font-size: 12px',
    submitFunction: () => {
      addLoading.value = true
      // 重新构造imgUrl
      // Data.addImgIndex.addQuery.imgUrl = `${import.meta.env.VITE_APP_BASE_API}/mall4cloud${Data.addImgIndex.addQuery.imgUrl}`
      api.addIndexImg(Data.addImgIndex.addQuery)
        .then(() => {
          ElMessage.success('创建成功')
          addLoading.value = false
          Data.functionOk = true
          emits('workEnd')
        })
        .catch(() => {
          ElMessage.error('创建失败')
          addLoading.value = false
        })
    },
    addQuery: {
      imgUrl: '',
      status: 1,
      seq: 0,
      imgType: 0,
      linkUrl: `post://${props.postId}`
    }
  },
  functionOk: false
})

const emits = defineEmits(['workEnd'])
</script>
